<template>
  <div>
    <el-header>
      <i class="el-icon-bank-card" style="font-size: 1.2vw"> 一卡通 管理界面</i>
    </el-header>
    <el-table
      max-height="100%"
      :data="
        tableDataCars.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      :header-cell-style="{
        width: '100%',
        color: '#333',
        fontSize: '1vw',
        fontWeight: 600,
        background: 'rgba(236,245,255,1)',
      }"
      :row-style="{
        fontSize: '0.8vw',
        color: 'rgb(85,26,139)',
      }"
      style="width: 100%; border: 1px solid rgba(208, 215, 223, 0.9)"
    >
      <el-table-column align="center" prop="id" sortable label="学号">
      </el-table-column>
      <el-table-column align="center" prop="name" sortable label="姓名">
      </el-table-column>
      <el-table-column
        align="center"
        prop="passWord"
        width="150"
        sortable
        label="密码"
      >
      </el-table-column>
      <el-table-column align="center" prop="balance" sortable label="余额 ￥">
      </el-table-column>
      <el-table-column align="center" prop="useCount" sortable label="使用次数">
      </el-table-column>

      <el-table-column
        border
        align="center"
        prop="state"
        sortable
        label="是否挂失"
      >
        <!-- eslint-disable-next-line -->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            plain
            v-show="scope.row.reportLoss === '否'"
            @click="changeLoss(scope.row.id)"
            >挂失
          </el-button>

          <span v-show="scope.row.reportLoss === '已挂失'">已挂失 </span>
        </template>
      </el-table-column>
      <el-table-column border align="center" prop="state" sortable label="状态">
        <!-- eslint-disable-next-line -->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            plain
            v-show="scope.row.state === '未激活'"
            @click="changeState(scope.row.id)"
            >激活
          </el-button>

          <span
            size="mini"
            type="success"
            plain
            v-show="scope.row.state === '已激活'"
            >已激活
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="190">
        <!-- eslint-disable-next-line -->
        <template slot="header" slot-scope="scope">
          <el-row>
            <el-input
              v-model="search"
              prefix-icon="el-icon-search"
              size="mini"
              v-focus
              placeholder="姓名"
            />
          </el-row>
        </template>

        <template slot-scope="scope">
          <el-row>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              plain
              @click="editCar(scope.row.id)"
            >
            </el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              plain
              @click="deletCar(scope.row.id, scope.row.name)"
            ></el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改弹窗 -->
    <div v-show="flag">
      <!-- 外部 -->
      <div class="mask" v-if="showModal" @click="showModal = false"></div>
      <!-- 内容 -->
      <div class="pop" v-if="showModal">
        <div class="title" style="">
          <span @click="flag = false">修改密码</span>
        </div>

        <div class="content">
          <el-row> 学号: {{ tableDataCars.id }} </el-row><br />
          <el-row> 姓名: {{ tableDataCars.name }} </el-row><br />
          <el-row>
            修改密码:
            <el-input
              type="text"
              v-model="password"
              placeholder="新密码"
              v-focus
            />
          </el-row>
          <el-row>
            确认密码:
            <el-input type="text" v-model="npassword" placeholder="确认密码" />
          </el-row>
        </div>
        <el-row class="conSty" style="padding-top: 20px; text-algin: center">
          <el-col :span="12">
            <el-button @click="updatePassword(tableDataCars.id)"
              >确定</el-button
            >
          </el-col>
          <el-col :span="12"
            ><el-button @click="flag = false">取消</el-button></el-col
          >
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import adminMixin from "../../mixin/adminMixin";
export default {
  name: "adminCar",
  mixins: [adminMixin],
  data() {
    return {
      search: "",
      studentId: "",
      edit: "",
      password: "",
      npassword: "",
      tableDataCars: [],
      flag: false, //弹框显示与隐藏
      showModal: false, //修改弹窗
    };
  },

  mounted() {
    this.getStudentsDataReq("/admin/queryStudentUserList");
  },
  watch: {
    Students: function () {
      Object.keys(this.Students.data.data).forEach((key) => {
        this.tableDataCars.push(this.Students.data.data[key]);
      });
    },
  },
  methods: {
    changeLoss(id) {
      if (confirm("确定挂失此账号: " + id + " ?")) {
        this.tableDataCars.forEach((element) => {
          if (id === element.id) {
            if (element.reportLoss === "否") {
              element.reportLoss = "已挂失";
              this.tableDataCars.reportLoss = element.reportLoss;
              // 发送挂失账号请求
              this.$axios({
                method: "post",
                url: "/admin/updateStudentUser",
                data: JSON.stringify(element),
                headers: { "Content-Type": "application/json" },
              })
                .then((res) => {
                  this.Students = res;
                })
                .catch((e) => {
                  console.log(e);
                });
            }
          }
        });
      }
    },

    changeState(id) {
      if (confirm("确定激活此账号: " + id + " ?")) {
        this.tableDataCars.forEach((element) => {
          if (id === element.id) {
            if (element.state === "未激活") {
              element.state = "已激活";
              this.tableDataCars.state = element.state;
              // 发送激活账号请求
              this.$axios({
                method: "post",
                url: "/admin/updateStudentUser",
                data: JSON.stringify(element),
                headers: { "Content-Type": "application/json" },
              })
                .then((res) => {
                  this.Students = res;
                })
                .catch((e) => {
                  console.log(e);
                });
            }
          }
        });
      }
    },

    editCar(id) {
      this.showModal = true;
      this.flag = true;
      let element = this.Students.data.data[id];
      if (id === element.id) {
        this.tableDataCars.id = element.id;
        this.tableDataCars.name = element.name;
        // this.tableDataCars.passWord = element.passWord;
        // this.password = this.tableDataCars.passWord;
      }
    },

    updatePassword(id) {
      if (this.password != "" && this.npassword != "") {
        if (this.password === this.npassword) {
          this.showModal = false;
          this.flag = false;
          this.tableDataCars.forEach((element) => {
            if (id === element.id) {
              element.passWord = this.password;
              // 发送修改密码请求
              this.$axios({
                method: "post",
                url: "/admin/updateStudentUser",
                data: JSON.stringify(element),
                headers: { "Content-Type": "application/json" },
              })
                .then((res) => {
                  this.Students = res;
                })
                .catch((e) => {
                  console.log(e);
                });
            }
          });
        } else {
          alert("两次输入密码不相同");
        }
      } else {
        alert("密码不为空");
      }
    },

    deletCar(id, name) {
      if (confirm("确定注销此账号: " + name + " ?")) {
        this.tableDataCars = this.tableDataCars.filter((car) => car.id !== id);
        // 发送注销请求
        this.postStuDelete("/admin/deleteStudentUserById/", id);
      }
    },
  },
};
</script>

<style scoped>
.el-header {
  height: 3vh !important;
  line-height: 3vh;
  text-align: center;
  background-color: #d0d7df;
  width: 100%;
  margin-bottom: 10px !important;
}

.mask {
  background-color: rgb(71, 93, 98);
  /* 透明度 */
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.pop {
  top: 50%;
  left: 50%;
  width: 15%;
  height: 45%;
  background-color: white;
  padding-top: 2%;
  padding-left: 4%;
  padding-right: 4%;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  position: fixed;
  color: #fff;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.title {
  color: black !important;
  font-size: 1.4vw !important;
  text-align: center;
  font-weight: 500;
  padding-bottom: 20px !important;
}

.content {
  color: black !important;
  font-size: 1vw;
  width: 100%;
  border: none;
}

.el-input {
  width: 60%;
  margin: 5px;
  border: none;
  outline: none;
  font-size: 1vw;
}
</style>
